<template>
    <div class="errorpage" id="bgstar" ref="bgstar" >
    <div class="dao" @click="gotowhere">
         <el-progress type="circle" :width='80' :stroke-width='4' :percentage="percentage" />
    </div>
    <img :src="img404" class="myimg" alt="">
    <span class="spandot"
    v-for="(l,i) in spanNum" :key="i"
    :style="{
        left:l.x,
        top:l.y,
        animationDelay:l.rate+'s',
        transform:'translata('+l.scaler+')',
        background:l.rgba

        }"
    ></span>
    </div>
</template>

<script>
import {ref,reactive,toRefs,onMounted,onUnmounted} from 'vue'
import img404 from '@/assets/images/404.png'
import {useRouter} from 'vue-router'
var timer = null
export default {
    name:'404',
    setup(props,context){
        const bgstar = ref() // 绑定ref
        const router = useRouter()
        const state = reactive({
            count:2000,
            spanNum:[],
            img404,
            percentage:0
        })

        onMounted(()=>{
            console.log('onMounted --- 组件初始化');
            spanInit()
            countDown()
        })

         onUnmounted(()=>{
            console.log('onUnmounted --- 组件销毁');
             clearInterval(timer)
             timer = null
        })

        const countDown = ()=>{
            timer = setInterval(() => {
                if(state.percentage<100){
                    state.percentage+=1
                }else{
                    clearInterval(timer)
                    timer = null
                    router.push({name:'login'})
                }
            }, 50);
        }

        const gotowhere = ()=>{
              router.push({name:'login'})
        }

        const spanInit = ()=>{
             var width = document.getElementById("bgstar").clientWidth; 
            var height = bgstar.value.clientHeight     // ref.value 
            console.log(bgstar)
            console.log(width,height)

            for(var i=0;i<520;i++){
                // 随机位置
                var x =  Math.floor(Math.random() * width)
                var y =  Math.floor(Math.random() * height)

                // 随机频率
                var rate = Math.random() * 2.5;

                // 随机大小
                var scaler=Math.random() * 1.5;

                // 随机颜色
                var r = Math.floor(Math.random() * 255)
                var g = Math.floor(Math.random() * 255)
                var b = Math.floor(Math.random() * 255)
                var a = Math.random() * 1;

                state.spanNum.push({
                    x:x+'px',
                    y:y+'px',
                    rate,
                    scaler,
                    rgba:`rgba(${r},${g},${b},${a})`
                })
            }
        }
        return{
            ...toRefs(state),
            bgstar,
            spanInit,
            gotowhere
        }
    }
}
</script>

<style lang="scss" scoped>
.errorpage{
  width:100%;
  height:100%;
  background: #000;
  position: relative;
  overflow: hidden;
  .dao{
    position: absolute;
    top:20px;
    right:20px;
    cursor: pointer;
    ::v-deep .van-circle__text{
      color:#fff !important;
    }
  }
  .myimg{
    width:300px;
    height:300px;
    position: absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
    z-index:10;
  }
  .spandot{
    position: absolute;
    z-index: 100;
    width: 4px;
    height:4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;

  }
   @keyframes flash {
        from{
            opacity: 0;
        }
        to{
            opacity: 0.5;
        }
    }
}
</style>